// import React, { useMemo } from 'react';
// import { t } from '@/locales/i18n';
// import { useContextSelector } from 'use-context-selector';
// import { useDeepCompareEffect } from 'ahooks';
// import { VariableItemType } from '@/types/app/type';
// import QuestionTip from '../tooltip/QuestionTip';
// import { VariableInputEnum } from '@/types/workflow/constant';
// import { TextArea } from 'antd-mobile';
// import { InputNumber, Select } from 'antd';

// export const VariableInputItem = ({
//   item,
//   variables,
//   setVariables,
// }: {
//   item: VariableItemType;
//   variables: Record<string, any>;
//   setVariables: React.Dispatch<React.SetStateAction<Record<string, any> | null>>;
// }) => {
//   const updateVariables = (key: string, value: any) => {
//     setVariables((prev) => ({
//       ...prev,
//       [key]: value,
//     }));
//   };

//   return (
//     <div className="mb-4 pl-1" key={item.id}>
//       <div className="relative mb-1 flex h-full items-center">
//         {item.label}
//         {item.required && <div className="absolute -left-2 -top-1 font-bold text-error">*</div>}
//         {item.description && <QuestionTip className="ml-1" title={item.description} />}
//       </div>
//       {item.type === VariableInputEnum.input && (
//         <TextArea
//           style={{
//             minHeight: '40px',
//             maxHeight: '160px',
//           }}
//           className="bg-gray-500"
//           value={variables[item.key]}
//           onChange={(e) => updateVariables(item.key, e)}
//         />
//       )}
//       {item.type === VariableInputEnum.textarea && (
//         <TextArea
//           value={variables[item.key]}
//           onChange={(e) => updateVariables(item.key, e)}
//           rows={5}
//           className="bg-gray-500"
//           maxLength={item.maxLength || 4000}
//         />
//       )}

//       {item.type === VariableInputEnum.select && (
//         <Select
//           key={item.key}
//           options={(item.enums || []).map((item: { value: any }) => ({
//             label: item.value,
//             value: item.value,
//           }))}
//           value={variables[item.key]}
//           onChange={(e) => {
//             updateVariables(item.key, e);
//           }}
//         />
//       )}
//       {item.type === VariableInputEnum.numberInput && (
//         <InputNumber
//           step={1}
//           min={item.min}
//           max={item.max}
//           value={variables[item.key]}
//           onChange={(e) => {
//             updateVariables(item.key, e);
//           }}
//         />
//       )}
//     </div>
//   );
// };

// const VariableInput = ({
//   chatForm,
//   chatStarted,
// }: {
//   chatStarted: boolean;
//   chatForm: UseFormReturn<ChatBoxInputFormType>;
// }) => {

//   const { appAvatar, variableList, variablesForm } = useContextSelector(ChatBoxContext, (v) => v);
//   const { reset, handleSubmit: handleSubmitChat } = variablesForm;

//   const defaultValues = useMemo(() => {
//     return variableList.reduce((acc: Record<string, any>, item) => {
//       acc[item.key] = item.defaultValue;
//       return acc;
//     }, {});
//   }, [variableList]);

//   useDeepCompareEffect(() => {
//     reset(defaultValues);
//   }, [defaultValues]);

//   return (
//     <Box py={3}>
//       <ChatAvatar src={appAvatar} type={'AI'} />
//       <Box textAlign={'left'}>
//         <Card
//           order={2}
//           mt={2}
//           w={'400px'}
//           {...MessageCardStyle}
//           bg={'white'}
//           boxShadow={'0 0 8px rgba(0,0,0,0.15)'}
//         >
//           {variableList.map((item) => (
//             <VariableInputItem key={item.id} item={item} variablesForm={variablesForm} />
//           ))}
//           {!chatStarted && (
//             <Box>
//               <Button
//                 leftIcon={<MyIcon name={'core/chat/chatFill'} w={'16px'} />}
//                 size={'sm'}
//                 maxW={'100px'}
//                 onClick={handleSubmitChat(() => {
//                   chatForm.setValue('chatStarted', true);
//                 })}
//               >
//                 {t('common:core.chat.Start Chat')}
//               </Button>
//             </Box>
//           )}
//         </Card>
//       </Box>
//     </Box>
//   );
// };

// export default VariableInput;
